var map = L.map('ArcGISmapContainer').setView([-33.87, 151.2], 10);
const apiKey = "AAPKec5e7aae3d6241c9b83417e4a1f8ee21EMkj1hcFCF2_9p3hi6MN_k5jkiq_fzMv_hLfpU85MGFJEp7sHV-ODgWcnD-YM43n";
var vectorTiles = {};
var allEnums = [
  'ArcGIS:Imagery',
  'ArcGIS:Imagery:Standard',
  'ArcGIS:Imagery:Labels',
  'ArcGIS:LightGray',
  'ArcGIS:LightGray:Base',
  'ArcGIS:LightGray:Labels',
  'ArcGIS:DarkGray',
  'ArcGIS:DarkGray:Base',
  'ArcGIS:DarkGray:Labels',
  'ArcGIS:Navigation',
  'ArcGIS:NavigationNight',
  'ArcGIS:Streets',
  'ArcGIS:StreetsNight',
  'ArcGIS:StreetsRelief',
  'ArcGIS:StreetsRelief:Base',
  'ArcGIS:Topographic',
  'ArcGIS:Topographic:Base',
  'ArcGIS:Oceans',
  'ArcGIS:Oceans:Base',
  'ArcGIS:Oceans:Labels',
  'OSM:Standard',
  'OSM:StandardRelief',
  'OSM:StandardRelief:Base',
  'OSM:Streets',
  'OSM:StreetsRelief',
  'OSM:StreetsRelief:Base',
  'OSM:LightGray',
  'OSM:LightGray:Base',
  'OSM:LightGray:Labels',
  'OSM:DarkGray',
  'OSM-DarkGray:Base',
  'OSM-DarkGray:Labels',
  'ArcGIS:Terrain',
  'ArcGIS:Terrain:Base',
  'ArcGIS:Terrain:Detail',
  'ArcGIS:Community',
  'ArcGIS:ChartedTerritory',
  'ArcGIS:ChartedTerritory:Base',
  'ArcGIS:ColoredPencil',
  'ArcGIS:Nova',
  'ArcGIS:ModernAntique',
  'ArcGIS:ModernAntique:Base',
  'ArcGIS:Midcentury',
  'ArcGIS:Newspaper',
  'ArcGIS:Hillshade:Light',
  'ArcGIS:Hillshade:Dark'
];

// the L.esri.Vector.vectorBasemapLayer basemap enum defaults to 'ArcGIS:Streets' if omitted
vectorTiles.Default = L.esri.Vector.vectorBasemapLayer(null, {
  apiKey
});
allEnums.forEach((enumString) => {
  vectorTiles[
    enumString
  ] = L.esri.Vector.vectorBasemapLayer(enumString, {
    apiKey
  });
});

L.control
  .layers(vectorTiles, null, {
    collapsed: false
  })
  .addTo(map);

vectorTiles.Default.addTo(map);